import React from 'react'
import styled from 'styled-components'
import Flex from '../Flex/'

const Fixed = props => {
	const { children, ...restProps } = props
	return <Container {...restProps}>{children}</Container>
}

const Container = styled(Flex)`
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9;
`

export default Fixed

export const Bottom = styled(Fixed)`
	top: auto;
	bottom: 0;
`
export const Top = styled(Fixed)`
	top: 0;
	bottom: auto;
`
 



// WEBPACK FOOTER //
// ./src/components/Fixed/index.js